
<template>
  <div class="driver-container">
    <div class="page-header">
      <div class="header-title">
        <h2>驾驶员管理</h2>
        <span class="subtitle">管理系统中的驾驶员信息</span>
      </div>
      <div class="header-actions">
        <el-button type="primary" @click="handleAddDriver">
          <el-icon><Plus /></el-icon>新增驾驶员
        </el-button>
        <el-button @click="handleImport">
          <el-icon><Upload /></el-icon>批量导入
        </el-button>
        <el-button @click="handleExport">
          <el-icon><Download /></el-icon>导出数据
        </el-button>
      </div>
    </div>

    <!-- 搜索过滤区 -->
    <el-card class="filter-container">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="姓名">
          <el-input v-model="filterForm.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="filterForm.phone" placeholder="请输入手机号码" clearable></el-input>
        </el-form-item>
        <el-form-item label="驾照类型">
          <el-select v-model="filterForm.licenseType" placeholder="请选择驾照类型" clearable>
            <el-option label="A1" value="A1"></el-option>
            <el-option label="A2" value="A2"></el-option>
            <el-option label="B1" value="B1"></el-option>
            <el-option label="B2" value="B2"></el-option>
            <el-option label="C1" value="C1"></el-option>
            <el-option label="C2" value="C2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="filterForm.status" placeholder="请选择状态" clearable>
            <el-option label="在职" value="active"></el-option>
            <el-option label="离职" value="inactive"></el-option>
            <el-option label="休假" value="vacation"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="驾照到期">
          <el-select v-model="filterForm.licenseExpiring" placeholder="驾照到期筛选" clearable>
            <el-option label="30天内到期" value="30"></el-option>
            <el-option label="90天内到期" value="90"></el-option>
            <el-option label="已过期" value="expired"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <el-icon><Search /></el-icon>搜索
          </el-button>
          <el-button @click="resetFilter">
            <el-icon><Refresh /></el-icon>重置
          </el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <!-- 数据表格 -->
    <el-card class="table-container">
      <el-table
        v-loading="tableLoading"
        :data="driverList"
        border
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="name" label="姓名" min-width="100" />
        <el-table-column prop="gender" label="性别" width="80">
          <template #default="scope">
            {{ scope.row.gender === 'male' ? '男' : '女' }}
          </template>
        </el-table-column>
        <el-table-column prop="age" label="年龄" width="80" />
        <el-table-column prop="phone" label="手机号码" min-width="120" />
        <el-table-column prop="licenseType" label="驾照类型" width="100" />
        <el-table-column prop="licenseExpireDate" label="驾照到期日期" min-width="120">
          <template #default="scope">
            <el-tag 
              :type="getLicenseExpiryTag(scope.row.licenseExpireDate)" 
              size="small">
              {{ scope.row.licenseExpireDate }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="drivingYears" label="驾龄" width="80">
          <template #default="scope">
            {{ scope.row.drivingYears }}年
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag 
              :type="getStatusTag(scope.row.status)" 
              size="small">
              {{ getStatusLabel(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="220" fixed="right">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button 
              size="small" 
              type="info" 
              @click="handleViewDetails(scope.row)">详情</el-button>
            <el-button 
              size="small" 
              type="danger" 
              @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      
      <!-- 分页 -->
      <div class="pagination-container">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 新增/编辑驾驶员对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogType === 'add' ? '新增驾驶员' : '编辑驾驶员'"
      width="60%"
      :before-close="handleDialogClose">
      <el-form
        ref="driverForm"
        :model="driverForm"
        :rules="driverRules"
        label-width="100px"
        class="driver-form">
        <el-tabs v-model="activeTab">
          <el-tab-pane label="基本信息" name="basic">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="姓名" prop="name">
                  <el-input v-model="driverForm.name" placeholder="请输入姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-radio-group v-model="driverForm.gender">
                    <el-radio label="male">男</el-radio>
                    <el-radio label="female">女</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="出生日期" prop="birthDate">
                  <el-date-picker
                    v-model="driverForm.birthDate"
                    type="date"
                    placeholder="选择出生日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="手机号码" prop="phone">
                  <el-input v-model="driverForm.phone" placeholder="请输入手机号码" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="身份证号" prop="idNumber">
                  <el-input v-model="driverForm.idNumber" placeholder="请输入身份证号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="入职日期" prop="hireDate">
                  <el-date-picker
                    v-model="driverForm.hireDate"
                    type="date"
                    placeholder="选择入职日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="紧急联系人" prop="emergencyContact">
                  <el-input v-model="driverForm.emergencyContact" placeholder="请输入紧急联系人姓名" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="紧急电话" prop="emergencyPhone">
                  <el-input v-model="driverForm.emergencyPhone" placeholder="请输入紧急联系人电话" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="状态" prop="status">
                  <el-select v-model="driverForm.status" placeholder="请选择状态" style="width: 100%">
                    <el-option label="在职" value="active"></el-option>
                    <el-option label="离职" value="inactive"></el-option>
                    <el-option label="休假" value="vacation"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="地址" prop="address">
                  <el-input v-model="driverForm.address" placeholder="请输入地址" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="员工照片" prop="photo">
                  <el-upload
                    action="#"
                    list-type="picture-card"
                    :auto-upload="false"
                    :file-list="photoList"
                    :on-change="handlePhotoChange"
                    :on-remove="handlePhotoRemove">
                    <el-icon><Plus /></el-icon>
                  </el-upload>
                  <div class="el-upload__tip">请上传员工照片，支持JPG、PNG格式</div>
                </el-form-item>
              </el-col>
            </el-row>
          </el-tab-pane>
          
          <el-tab-pane label="驾照信息" name="license">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="驾照类型" prop="licenseType">
                  <el-select v-model="driverForm.licenseType" placeholder="请选择驾照类型" style="width: 100%">
                    <el-option label="A1" value="A1"></el-option>
                    <el-option label="A2" value="A2"></el-option>
                    <el-option label="B1" value="B1"></el-option>
                    <el-option label="B2" value="B2"></el-option>
                    <el-option label="C1" value="C1"></el-option>
                    <el-option label="C2" value="C2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="驾照号码" prop="licenseNumber">
                  <el-input v-model="driverForm.licenseNumber" placeholder="请输入驾照号码" />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="发证日期" prop="licenseIssueDate">
                  <el-date-picker
                    v-model="driverForm.licenseIssueDate"
                    type="date"
                    placeholder="选择发证日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="有效期至" prop="licenseExpireDate">
                  <el-date-picker
                    v-model="driverForm.licenseExpireDate"
                    type="date"
                    placeholder="选择有效期截止日期"
                    style="width: 100%"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="驾龄" prop="drivingYears">
                  <el-input-number v-model="driverForm.drivingYears" :min="0" :max="50" style="width: 100%" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="准驾车型" prop="allowedVehicleTypes">
                  <el-select
                    v-model="driverForm.allowedVehicleTypes"
                    multiple
                    placeholder="请选择准驾车型"
                    style="width: 100%">
                    <el-option label="重型卡车" value="heavy"></el-option>
                    <el-option label="中型卡车" value="medium"></el-option>
                    <el-option label="轻型卡车" value="light"></el-option>
                    <el-option label="厢式货车" value="van"></el-option>
                    <el-option label="冷藏车" value="refrigerated"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            
            <el-form-item label="驾照照片" prop="licensePhotos">
              <el-upload
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                :file-list="licensePhotoList"
                :on-change="handleLicensePhotoChange"
                :on-remove="handleLicensePhotoRemove">
                <el-icon><Plus /></el-icon>
              </el-upload>
              <div class="el-upload__tip">请上传驾照正反面照片，支持JPG、PNG格式</div>
            </el-form-item>
          </el-tab-pane>
          
          <el-tab-pane label="备注信息" name="notes">
            <el-form-item label="备注" prop="notes">
              <el-input
                v-model="driverForm.notes"
                type="textarea"
                :rows="4"
                placeholder="请输入备注信息"
              />
            </el-form-item>
          </el-tab-pane>
        </el-tabs>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitDriverForm">确认</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 驾驶员详情对话框 -->
    <el-dialog
      v-model="detailsDialogVisible"
      title="驾驶员详情"
      width="70%">
      <el-descriptions
        v-if="currentDriver"
        :column="2"
        border>
        <el-descriptions-item label="姓名">{{ currentDriver.name }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ currentDriver.gender === 'male' ? '男' : '女' }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{ currentDriver.age }}岁</el-descriptions-item>
        <el-descriptions-item label="手机号码">{{ currentDriver.phone }}</el-descriptions-item>
        <el-descriptions-item label="身份证号">{{ currentDriver.idNumber }}</el-descriptions-item>
        <el-descriptions-item label="入职日期">{{ currentDriver.hireDate }}</el-descriptions-item>
        <el-descriptions-item label="紧急联系人">{{ currentDriver.emergencyContact }}</el-descriptions-item>
        <el-descriptions-item label="紧急联系电话">{{ currentDriver.emergencyPhone }}</el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag :type="getStatusTag(currentDriver.status)">
            {{ getStatusLabel(currentDriver.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="地址">{{ currentDriver.address }}</el-descriptions-item>
        <el-descriptions-item label="驾照类型">{{ currentDriver.licenseType }}</el-descriptions-item>
        <el-descriptions-item label="驾照号码">{{ currentDriver.licenseNumber }}</el-descriptions-item>
        <el-descriptions-item label="发证日期">{{ currentDriver.licenseIssueDate }}</el-descriptions-item>
        <el-descriptions-item label="有效期至">
          <el-tag :type="getLicenseExpiryTag(currentDriver.licenseExpireDate)">
            {{ currentDriver.licenseExpireDate }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="驾龄">{{ currentDriver.drivingYears }}年</el-descriptions-item>
        <el-descriptions-item label="准驾车型">
          <el-tag 
            v-for="type in currentDriver.allowedVehicleTypes" 
            :key="type"
            style="margin-right: 5px;">
            {{ getVehicleTypeLabel(type) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">{{ currentDriver.notes }}</el-descriptions-item>
        <el-descriptions-item label="员工照片" :span="2">
          <el-image
            v-if="currentDriver.photo"
            :src="currentDriver.photo"
            fit="cover"
            style="width: 150px; height: 100px;"
          />
        </el-descriptions-item>
      </el-descriptions>
      
      <div v-if="currentDriver && currentDriver.licensePhotos && currentDriver.licensePhotos.length > 0" class="license-photos">
        <h3>驾照照片</h3>
        <el-image
          v-for="(photo, index) in currentDriver.licensePhotos"
          :key="index"
          :src="photo.url"
          :preview-src-list="currentDriver.licensePhotos.map(p => p.url)"
          fit="cover"
          style="width: 150px; height: 100px; margin-right: 10px;"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus, Upload, Download, Search, Refresh } from '@element-plus/icons-vue'

// 表格加载状态
const tableLoading = ref(false)

// 分页相关
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 选中的驾驶员
const selectedDrivers = ref([])

// 对话框相关
const dialogVisible = ref(false)
const dialogType = ref('add') // 'add' 或 'edit'
const activeTab = ref('basic')
const detailsDialogVisible = ref(false)
const currentDriver = ref(null)

// 驾照照片列表
const licensePhotoList = ref([])

// 员工照片列表
const photoList = ref([])

// 搜索过滤表单
const filterForm = reactive({
  name: '',
  phone: '',
  licenseType: '',
  status: '',
  licenseExpiring: ''
})

// 驾驶员表单
const driverForm = reactive({
  id: '',
  name: '',
  gender: 'male',
  birthDate: '',
  age: '',
  phone: '',
  idNumber: '',
  hireDate: '',
  emergencyContact: '',
  emergencyPhone: '',
  status: 'active',
  address: '',
  licenseType: '',
  licenseNumber: '',
  licenseIssueDate: '',
  licenseExpireDate: '',
  drivingYears: 0,
  allowedVehicleTypes: [],
  licensePhotos: [],
  photo: '', // 员工照片
  notes: ''
})

// 表单验证规则
const driverRules = reactive({
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' },
    { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
  ],
  gender: [
    { required: true, message: '请选择性别', trigger: 'change' }
  ],
  phone: [
    { required: true, message: '请输入手机号码', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  idNumber: [
    { required: true, message: '请输入身份证号', trigger: 'blur' },
    { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '请输入正确的身份证号', trigger: 'blur' }
  ],
  licenseType: [
    { required: true, message: '请选择驾照类型', trigger: 'change' }
  ],
  licenseNumber: [
    { required: true, message: '请输入驾照号码', trigger: 'blur' }
  ],
  licenseExpireDate: [
    { required: true, message: '请选择驾照有效期', trigger: 'change' }
  ]
})

// 驾驶员列表
const driverList = ref([
  // 模拟数据，实际应用中应该从API获取
  {
    id: '1',
    name: '张三',
    gender: 'male',
    birthDate: '1985-05-15',
    age: 38,
    phone: '13800138000',
    idNumber: '110101198505150011',
    hireDate: '2020-01-15',
    emergencyContact: '李四',
    emergencyPhone: '13900139000',
    status: 'active',
    address: '北京市朝阳区建国路88号',
    licenseType: 'A2',
    licenseNumber: '110101198505150011',
    licenseIssueDate: '2010-06-20',
    licenseExpireDate: '2025-06-20',
    drivingYears: 13,
    allowedVehicleTypes: ['heavy', 'medium'],
    licensePhotos: [
      { name: '驾照正面.jpg', url: 'https://example.com/license1.jpg' },
      { name: '驾照背面.jpg', url: 'https://example.com/license2.jpg' }
    ],
    photo: 'https://example.com/photo1.jpg',
    notes: '优秀驾驶员，安全记录良好'
  },
  {
    id: '2',
    name: '李四',
    gender: 'male',
    birthDate: '1990-03-20',
    age: 33,
    phone: '13811138111',
    idNumber: '110101199003200033',
    hireDate: '2021-05-10',
    emergencyContact: '王五',
    emergencyPhone: '13922239222',
    status: 'active',
    address: '北京市海淀区中关村大街1号',
    licenseType: 'B1',
    licenseNumber: '110101199003200033',
    licenseIssueDate: '2015-04-15',
    licenseExpireDate: '2025-04-15',
    drivingYears: 8,
    allowedVehicleTypes: ['medium', 'light'],
    licensePhotos: [
      { name: '驾照正面.jpg', url: 'https://example.com/license3.jpg' },
      { name: '驾照背面.jpg', url: 'https://example.com/license4.jpg' }
    ],
    photo: 'https://example.com/photo2.jpg',
    notes: '经验丰富，熟悉城市道路'
  },
  {
    id: '3',
    name: '王五',
    gender: 'male',
    birthDate: '1988-11-05',
    age: 35,
    phone: '13833338333',
    idNumber: '110101198811050055',
    hireDate: '2019-08-20',
    emergencyContact: '赵六',
    emergencyPhone: '13944439444',
    status: 'vacation',
    address: '北京市丰台区丰台路100号',
    licenseType: 'A1',
    licenseNumber: '110101198811050055',
    licenseIssueDate: '2008-10-10',
    licenseExpireDate: '2023-04-10',
    drivingYears: 15,
    allowedVehicleTypes: ['heavy', 'medium', 'refrigerated'],
    licensePhotos: [
      { name: '驾照正面.jpg', url: 'https://example.com/license5.jpg' },
      { name: '驾照背面.jpg', url: 'https://example.com/license6.jpg' }
    ],
    photo: 'https://example.com/photo3.jpg',
    notes: '专长长途运输，熟悉全国高速路线'
  }
])

// 获取状态标签样式
const getStatusTag = (status) => {
  const statusMap = {
    active: 'success',
    inactive: 'danger',
    vacation: 'warning'
  }
  return statusMap[status] || 'info'
}

// 获取状态标签文本
const getStatusLabel = (status) => {
  const statusMap = {
    active: '在职',
    inactive: '离职',
    vacation: '休假'
  }
  return statusMap[status] || '未知'
}

// 获取驾照到期标签样式
const getLicenseExpiryTag = (expireDate) => {
  if (!expireDate) return 'info'
  
  const today = new Date()
  const expiry = new Date(expireDate)
  const diffDays = Math.ceil((expiry - today) / (1000 * 60 * 60 * 24))
  
  if (diffDays < 0) return 'danger'
  if (diffDays <= 30) return 'warning'
  if (diffDays <= 90) return 'info'
  return 'success'
}

// 获取车辆类型标签文本
const getVehicleTypeLabel = (type) => {
  const typeMap = {
    heavy: '重型卡车',
    medium: '中型卡车',
    light: '轻型卡车',
    van: '厢式货车',
    refrigerated: '冷藏车'
  }
  return typeMap[type] || '未知'
}

// 处理表格选择变化
const handleSelectionChange = (selection) => {
  selectedDrivers.value = selection
}

// 处理搜索
const handleSearch = () => {
  tableLoading.value = true
  // 实际应用中应该调用API进行搜索
  setTimeout(() => {
    // 模拟搜索结果
    tableLoading.value = false
    ElMessage.success('搜索完成')
  }, 500)
}

// 重置过滤条件
const resetFilter = () => {
  Object.keys(filterForm).forEach(key => {
    filterForm[key] = ''
  })
  handleSearch()
}

// 处理新增驾驶员
const handleAddDriver = () => {
  dialogType.value = 'add'
  activeTab.value = 'basic'
  
  // 重置表单
  Object.keys(driverForm).forEach(key => {
    if (key === 'gender') {
      driverForm[key] = 'male'
    } else if (key === 'status') {
      driverForm[key] = 'active'
    } else if (key === 'drivingYears') {
      driverForm[key] = 0
    } else if (key === 'allowedVehicleTypes') {
      driverForm[key] = []
    } else if (key === 'licensePhotos') {
      driverForm[key] = []
    } else if (key === 'photo') {
      driverForm[key] = ''
    } else {
      driverForm[key] = ''
    }
  })
  
  licensePhotoList.value = []
  photoList.value = []
  dialogVisible.value = true
}

// 处理编辑驾驶员
const handleEdit = (row) => {
  dialogType.value = 'edit'
  activeTab.value = 'basic'
  
  // 填充表单数据
  Object.keys(driverForm).forEach(key => {
    driverForm[key] = row[key]
  })
  
  // 设置驾照照片列表
  licensePhotoList.value = row.licensePhotos ? [...row.licensePhotos] : []
  photoList.value = row.photo ? [{ name: '员工照片.jpg', url: row.photo }] : []
  
  dialogVisible.value = true
}

// 处理查看详情
const handleViewDetails = (row) => {
  currentDriver.value = { ...row }
  detailsDialogVisible.value = true
}

// 处理删除
const handleDelete = (row) => {
  ElMessageBox.confirm(
    `确定要删除驾驶员 ${row.name} 吗？`,
    '警告',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(() => {
    // 实际应用中应该调用API删除数据
    const index = driverList.value.findIndex(item => item.id === row.id)
    if (index !== -1) {
      driverList.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  }).catch(() => {
    ElMessage.info('已取消删除')
  })
}

// 处理导入
const handleImport = () => {
  ElMessage.info('导入功能开发中...')
}

// 处理导出
const handleExport = () => {
  ElMessage.info('导出功能开发中...')
}

// 处理驾照照片变更
const handleLicensePhotoChange = (file, fileList) => {
  licensePhotoList.value = fileList
}

// 处理驾照照片移除
const handleLicensePhotoRemove = (file, fileList) => {
  licensePhotoList.value = fileList
}

// 处理员工照片变更
const handlePhotoChange = (file, fileList) => {
  photoList.value = fileList
}

// 处理员工照片移除
const handlePhotoRemove = (file, fileList) => {
  photoList.value = fileList
}

// 对话框关闭处理
const handleDialogClose = (done) => {
  ElMessageBox.confirm('确认关闭？未保存的数据将会丢失', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    done()
  }).catch(() => {})
}

// 提交驾驶员表单
const submitDriverForm = () => {
  const driverFormEl = document.querySelector('.driver-form')
  if (!driverFormEl) return
  
  driverFormEl.validate((valid) => {
    if (valid) {
      // 处理驾照照片
      driverForm.licensePhotos = licensePhotoList.value
      
      // 处理员工照片
      driverForm.photo = photoList.value[0] ? photoList.value[0].url : ''
      
      if (dialogType.value === 'add') {
        // 新增驾驶员
        // 实际应用中应该调用API保存数据
        const newDriver = {
          ...driverForm,
          id: Date.now().toString() // 模拟生成ID
        }
        driverList.value.push(newDriver)
        ElMessage.success('新增驾驶员成功')
      } else {
        // 编辑驾驶员
        // 实际应用中应该调用API更新数据
        const index = driverList.value.findIndex(item => item.id === driverForm.id)
        if (index !== -1) {
          driverList.value[index] = { ...driverForm }
          ElMessage.success('更新驾驶员信息成功')
        }
      }
      
      dialogVisible.value = false
    } else {
      ElMessage.error('请完善表单信息')
      return false
    }
  })
}

// 处理分页大小变化
const handleSizeChange = (size) => {
  pageSize.value = size
  // 实际应用中应该重新加载数据
}

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  // 实际应用中应该重新加载数据
}

// 计算属性：根据过滤条件筛选驾驶员列表
const filteredDriverList = computed(() => {
  // 实际应用中应该由后端API处理筛选
  return driverList.value
})

onMounted(() => {
  // 实际应用中应该调用API加载数据
  tableLoading.value = true
  setTimeout(() => {
    tableLoading.value = false
    total.value = driverList.value.length
  }, 500)
})
</script>

<style scoped>
.driver-container {
  padding: 20px;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.header-title {
  display: flex;
  flex-direction: column;
}

.header-title h2 {
  margin: 0;
  font-size: 24px;
}

.subtitle {
  font-size: 14px;
  color: #909399;
  margin-top: 5px;
}

.filter-container {
  margin-bottom: 20px;
}

.filter-form {
  display: flex;
  flex-wrap: wrap;
}

.table-container {
  margin-bottom: 20px;
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.license-photos {
  margin-top: 20px;
}

.license-photos h3 {
  margin-bottom: 10px;
  font-size: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>